<template>
  <div class="work_order_preview">
    <one-title title="工单表导入预览" @refreshData="refresh">
      <div class="mes_btn">
        <el-button type="success" :disabled="isLoading"  @click="saveData">保存</el-button>
      </div>
    </one-title>
    <div class="table_container">
      <el-table
        :data="importData.workorderSheet"
        v-loading="isLoading"
        border
        height="100%"
        style="max-width: 100%">
        <mes-col-comp
          :key="index"
          v-for="(column, index) in workOrderColumn"
          :column="column"></mes-col-comp>
      </el-table>
    </div>
  </div>
</template>

<script>
// 工单表列配置
import workOrderColumn from './components/workOrderColumn'

export default {
  name: 'WorkOrderPreview',
  data() {
    return {
      workOrderColumn: workOrderColumn, // 工单表列配置
      saveLoading: false, // 保存中
      isLoading: true, // 加载中
      source: null, // axios token
    }
  },
  computed: {
    // 导入的数据
    importData() {
      return this.$store.state.workListReceive.importData
    },
    // 保存状态
    saveState() {
      return this.$store.state.saveState
    }
  },
  mounted() {
    this.source = this.$axios.CancelToken.source()
    this.init()
  },
  methods: {
    // 刷新
    refresh() {
      this.init()
    },
    // 初始化
    init() {
      this.isLoading = true
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/workorder/workorderExcel/retrievetask',
        data: {
          path: this.$route.params.id,
          fileName: this.$route.query.fileName
        },
        module: 'workListReceive',
        state: 'importData',
        cancelToken: this.source.token
      }).then(res => {
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 保存
    saveData() {
      if (Object.keys(this.importData).length < 1 || this.saveState === true) return
      this.$store.commit('SetSaveState', true)
      //  this.source.cancel('终止请求')
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/workorder/workorderExcel/savetask',
        data: {
          path: this.$route.params.id,
          fileName: this.$route.query.fileName,
          secretLevel: this.$route.query.fileGrade,
        },
        noCommit: true
      }).then(() => {
        this.$message({
          type: 'success',
          message: '保存成功',
          duration: 1500,
          center: true,
          onClose: () => {
            this.$store.dispatch('delCurrentViews', this.$route).then(() => {
              this.$router.push('/workListReceive')
              this.$store.commit('SetRefresh', true)
            })
          }
        })
      }).finally(() => {
        this.$store.commit('SetSaveState', false)
      })
    }
  }
}
</script>

<style scoped lang="less">
  .work_order_preview{
    height: 100%;
    .table_container{
      padding: 20px 20px;
      height: calc(100% - 56px);
      box-sizing: border-box;
    }
  }
</style>
